<template>
  <div id="app" ref="editorRef"></div>
  <a-space :size="16" style="margin-top: 16px">
      <a-button type="primary" style="width: 180px" @click="doSubmit">
        运行
      </a-button>
      <a-button @click="doFormat">格式化</a-button>
      <a-button @click="doReset">重置</a-button>
    </a-space>
</template>

<script setup >
import { onUnmounted,onMounted, ref, toRaw ,toRefs,watchEffect} from "vue";
import * as monaco from "monaco-editor";
//SQL语句格式化工具
import { format } from 'sql-formatter';
// 解决下面控制台的提示You must define a function MonacoEnvironment.getWorkerUrl or MonacoEnvironment.getWorker
import EditorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
(self ).MonacoEnvironment = {
  getWorker(_, label ) {
    return new EditorWorker();
  },
};
import {runSQL,initDB } from "../sql/index"
import { message } from "ant-design-vue";
import {checkResult} from "../common/result"
import { useResultStore } from '@/stores/counter'
const Result = useResultStore()
const db = ref();
const props = defineProps(['level','onSubmit'])
const editorRef = ref(null);
const inputEditor = ref();
watchEffect(async () =>{
  // 初始化 / 更新默认 SQL
  if (inputEditor.value) {
    toRaw(inputEditor.value).setValue(
      "-- 请在此处输入 SQL\n" + props.level.defaultSQL
    );
  }
  //初始化数据库
   db.value = await initDB(props.level.initSQL);
   doSubmit();
})
onMounted(() => {
    const initValue = "select * from student";
    inputEditor.value = monaco.editor.create(editorRef.value, {
    value: initValue,
    language: "sql",
      theme: "vs-dark",
      formatOnPaste: true,
      automaticLayout: true,
      fontSize: 16,
      minimap: {
        enabled: false,
      },
  });
});

/**
 * SQL格式化
 * 案例
 * console.log(format('SELECT * FROM tbl', { language: 'sqlite' }));
 * https://www.npmjs.com/package/sql-formatter
 */
 const doFormat = () => {
  if (!inputEditor.value) {
    return;
  }
  const inputStr = toRaw(inputEditor.value).getValue();
  const resultStr = format(inputStr, { language: "sqlite" });
  toRaw(inputEditor.value).setValue(resultStr);
};
/**
 * 重置
 */
 const doReset = () => {
  if (inputEditor.value) {
    toRaw(inputEditor.value).setValue(props.level.defaultSQL);
    // doSubmit();
  }
};
/**
 * 运行
 */
const doSubmit = () => {
    if (!inputEditor.value) {
        return;
    }
    const inputStr = toRaw(inputEditor.value).getValue();
    try{
      const result = runSQL(db.value, inputStr);
      const answerResult = runSQL(db.value, props.level.answer);
      Result.resultStatus = checkResult(result,answerResult);
      Result.Msg = true;
      Result.result =result
      Result.MsgStatus = true
    }catch(error){
      Result.result = []
      Result.resultStatus = 0
      Result.Msg = error.message
      Result.MsgStatus = false
      message.error("语句错误，" + error.message);
    }
    
}
/**
 * 释放资源
 */
 onUnmounted(() => {
  if (inputEditor.value) {
    toRaw(inputEditor.value).dispose();
  }
});
</script>
<style scoped>
#app {
  height: 280px;
}
</style>

